<!-- 边框配置 -->
<template>
  <div style="margin-top: 16px">
    <!-- style="width: 200px"  -->
    <el-form-item label="边框类型">
      <l-select
        :options="borderOptions"
        v-model="myConfig.borderValue"
        @change="handleChange"
        :clearable="false"
      >
      </l-select>
    </el-form-item>
    <el-form-item :label="$t('主颜色')" class="form_item_margin">
      <span class="l_color_box r_margin_right8">
        <l-input-color
          v-model="myConfig.mainColor"
          :notInput="true"
        ></l-input-color>
      </span>
      <el-input v-model="myConfig.mainColor" class="r_160width"></el-input>
    </el-form-item>
    <el-form-item :label="$t('副颜色')" class="form_item_margin">
      <span class="l_color_box r_margin_right8">
        <l-input-color
          v-model="myConfig.subColor"
          :notInput="true"
        ></l-input-color>
      </span>
      <el-input v-model="myConfig.subColor" class="r_160width"></el-input>
    </el-form-item>
    <el-form-item :label="$t('背景色')" class="form_item_margin">
      <span class="l_color_box r_margin_right8">
        <l-input-color
          v-model="myConfig.backgroundColor"
          :notInput="true"
        ></l-input-color>
      </span>
      <el-input
        v-model="myConfig.backgroundColor"
        class="r_160width"
      ></el-input>
    </el-form-item>
    <el-form-item label="标题名称" v-if="myConfig.borderValue === 11">
      <el-input v-model="myConfig.title"></el-input>
    </el-form-item>
    <el-form-item label="标题宽度" v-if="myConfig.borderValue === 11">
      <el-input-number
        v-model="myConfig.titleWidth"
        controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item :label="$t('透明度')" class="form_item_margin">
      <el-slider
        v-model="myConfig.opacity"
        :show-tooltip="false"
        class="slider136 r_margin_right8"
      ></el-slider>
      <el-input
        v-model.number="myConfig.opacity"
        class="r_56width"
        oninput="value=value.replace(/[^\d]/g,'')"
      >
        <span slot="suffix" style="line-height: 32px">%</span>
      </el-input>
    </el-form-item>
    <hr class="hr_color" style="margin-bottom: 2px" />
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
  data() {
    return {
      borderOptions: [
        { label: "边框1", value: 1 },
        { label: "边框2", value: 2 },
        { label: "边框3", value: 3 },
        { label: "边框4", value: 4 },
        { label: "边框5", value: 5 },
        { label: "边框6", value: 6 },
        { label: "边框7", value: 7 },
        { label: "边框8", value: 8 },
        { label: "边框9", value: 9 },
        { label: "边框10", value: 10 },
        { label: "边框11", value: 11 },
        { label: "边框12", value: 12 },
      ],
    };
  },
  methods: {
    handleChange(val) {
      this.$set(this.myConfig, "borderValue", val.value);
    },
  },
};
</script>

<style>
</style>